<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
     <div id ="root">
        <input type="text" v-model:value="keyword" placeholder="请输入搜索关键字"></input><br/>
        <ul>
            <li v-for="item in filterPersons">
                {{item.name}} - {{item.age}} - {{item.sex}}
            </li>
        </ul>
     </div>

     <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: "#root",
            data:function(){
                return {
                    persons:[{id: "001", name:'周冬雨', age:20, sex:'女'},
                    {id: "002", name:'马冬梅', age:19, sex:'女'},
                    {id: "003", name:'周杰伦', age:21, sex:'男'},
                    {id: "004", name:'温兆伦', age:22, sex: '男'}],
                    keyword:""
                    //filterPersons:[]
                }
            },
            //通过watch实现数据过滤
            /*
            watch:{
                keyword:{
                    immediate:true,
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                        this.filterPersons =this.persons.filter(item =>
                            item.name.indexOf(newValue) !== -1
                        )
                    }
                }
            },*/
            computed:{
                filterPersons:{
                    get(){
                        return this.persons.filter(item =>
                            item.name.indexOf(this.keyword) !== -1
                        )
                    }
                }
            }
        })
     </script>
</body>
</html>